<template>
    <div>
            <!-- <h3> - - - - - - - - - - - - - - - - - - </h3> -->

        <div class="music_box" v-for="item in musicList" :key="item.id" @click="goMusic(item.id)">

                <p>
                    <span>歌曲名：{{item.songName}}
                        </span>
                    <span>作者：{{item.artistName}}</span>
                </p>
                <p>所属专辑：{{item.albumName}}</p>

        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            page:1,
            musicList:[]
        }
    },
    methods:{

            getMusicList(){
                let _this = this
                _this.$axios.get('/music/song/search?keyWord='+_this.$route.query.name+'&page='+_this.page).then(res=>{
                    // console.log(res.data)
                    _this.musicList = res.data.data.list
                })
            },

            goMusic(id){
                let _this = this
                _this.$router.push('/home/music/music_box/?id='+id)
            }

    },
    created(){

        this.getMusicList()

    }
}
</script>

<style lang="less" scoped>

    .music_box{
        width: 90%;
        border-radius: 10px;
        background-color: #f5f5f5;
        margin: 10px auto;
        padding: 1px 8px;

        p{
        line-height: 1;
        font-size: 13px;
        display: flex;
        color: #333;
        font-weight: 300;
        span{
            flex: 1;
        }
    }

    }

    
    
</style>